<template>
	<view class="consumption-gold-page">
		<!-- 背景图片 -->
		<image class="bg-image" src="https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/consumptiongoldBg.png" mode="aspectFill"></image>
		
		<!-- 导航栏 -->
		<view class="nav-bar" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="nav-left" @click="goBack">
				<uv-icon name="arrow-left" color="#fff" size="20"></uv-icon>
			</view>
			<view class="nav-title">我的消费金</view>
			<view class="nav-right">
				<uv-icon name="more-dot-fill" color="#fff" size="20" @click="showMoreOptions"></uv-icon>
				<uv-icon name="info-circle" color="#fff" size="20" @click="showRules" style="margin-left: 20rpx;"></uv-icon>
			</view>
		</view>
		
		<!-- 余额卡片 -->
		<view class="balance-card">
			<view class="balance-content">
				<view class="balance-amount">{{ balance }}</view>
				<view class="balance-label">消费金余额</view>
				<view class="balance-rules" @click="showRules">
					<text>规则</text>
					<uv-icon name="info-circle" color="#fff" size="14"></uv-icon>
				</view>
			</view>
			<view class="balance-decoration">
				<view class="coin-stack" v-for="i in 3" :key="i"></view>
			</view>
		</view>
		
		<!-- 交易明细 -->
		<view class="transaction-section">
			<view class="section-header">
				<text class="section-title">消费金明细</text>
				<view class="month-picker" @click="showMonthPicker">
					<text>{{ currentMonth }}</text>
					<uv-icon name="arrow-down" size="12"></uv-icon>
				</view>
			</view>
			
			<!-- 交易列表 -->
			<view class="transaction-list">
				<view class="transaction-item" v-for="(item, index) in currentPageData" :key="index">
					<view class="transaction-info">
						<view class="transaction-title">{{ item.title }}</view>
						<view class="transaction-time">{{ item.time }}</view>
					</view>
					<view class="transaction-amount" :class="item.type === 'income' ? 'income' : 'expense'">
						{{ item.type === 'income' ? '+' : '-' }}{{ item.amount }}
					</view>
				</view>
			</view>
			
			<!-- 分页 -->
			<view class="pagination" v-if="totalPages > 1">
				<view class="page-btn" :class="{ disabled: currentPage === 1 }" @click="prevPage">
					<uv-icon name="arrow-left" size="14"></uv-icon>
					<text>上一页</text>
				</view>
				<view class="page-info">
					<text>{{ currentPage }}</text>
					<text>/</text>
					<text>{{ totalPages }}</text>
				</view>
				<view class="page-btn" :class="{ disabled: currentPage === totalPages }" @click="nextPage">
					<text>下一页</text>
					<uv-icon name="arrow-right" size="14"></uv-icon>
				</view>
			</view>
		</view>
		
		<!-- 月份选择器弹窗 -->
		<uv-picker
			:show="showPicker"
			:columns="monthColumns"
			@confirm="onMonthConfirm"
			@cancel="showPicker = false"
		></uv-picker>
		
		<!-- 规则弹窗 -->
		<uv-modal
			:show="showRulesModal"
			title="消费金规则"
			@close="showRulesModal = false"
		>
			<view class="rules-content">
				<view class="rule-item">
					<text class="rule-title">1. 消费金获取</text>
					<text class="rule-desc">通过购物、分享、签到等方式获得消费金</text>
				</view>
				<view class="rule-item">
					<text class="rule-title">2. 消费金使用</text>
					<text class="rule-desc">可在购物时抵扣商品金额，1消费金=1元</text>
				</view>
				<view class="rule-item">
					<text class="rule-title">3. 有效期</text>
					<text class="rule-desc">消费金有效期为获得后12个月</text>
				</view>
			</view>
		</uv-modal>
	</view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 响应式数据
const statusBarHeight = ref(0)
const balance = ref('9990.00')
const currentMonth = ref('2025年2月')
const currentPage = ref(1)
const pageSize = ref(10)
const showPicker = ref(false)
const showRulesModal = ref(false)

// 月份选择器数据
const monthColumns = ref([
	'2025年1月', '2025年2月', '2025年3月', '2025年4月', '2025年5月', '2025年6月',
	'2025年7月', '2025年8月', '2025年9月', '2025年10月', '2025年11月', '2025年12月'
])

// 模拟交易数据
const transactionData = ref([
	{
		title: '共富收益结算',
		time: '2025-02-12 12:30:20',
		amount: '200',
		type: 'income'
	},
	{
		title: '管家充值',
		time: '2025-02-12 12:30:20',
		amount: '200',
		type: 'income'
	},
	{
		title: '支付订单2308402302',
		time: '2025-02-12 12:30:20',
		amount: '200',
		type: 'expense'
	},
	{
		title: '共富收益结算',
		time: '2025-02-11 15:20:10',
		amount: '150',
		type: 'income'
	},
	{
		title: '购物消费',
		time: '2025-02-11 10:15:30',
		amount: '50',
		type: 'expense'
	},
	{
		title: '签到奖励',
		time: '2025-02-10 09:00:00',
		amount: '10',
		type: 'income'
	},
	{
		title: '分享奖励',
		time: '2025-02-09 16:45:22',
		amount: '30',
		type: 'income'
	},
	{
		title: '商品购买',
		time: '2025-02-09 14:30:15',
		amount: '100',
		type: 'expense'
	},
	{
		title: '活动奖励',
		time: '2025-02-08 20:10:45',
		amount: '80',
		type: 'income'
	},
	{
		title: '订单支付',
		time: '2025-02-08 11:25:33',
		amount: '75',
		type: 'expense'
	},
	{
		title: '推荐奖励',
		time: '2025-02-07 18:20:10',
		amount: '120',
		type: 'income'
	},
	{
		title: '消费抵扣',
		time: '2025-02-07 13:15:28',
		amount: '25',
		type: 'expense'
	}
])

// 计算属性
const totalPages = computed(() => Math.ceil(transactionData.value.length / pageSize.value))

const currentPageData = computed(() => {
	const start = (currentPage.value - 1) * pageSize.value
	const end = start + pageSize.value
	return transactionData.value.slice(start, end)
})

// 方法
const getBarHeight = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight
}

const goBack = () => {
	uni.navigateBack()
}

const showMoreOptions = () => {
	uni.showToast({
		title: '更多功能开发中',
		icon: 'none'
	})
}

const showRules = () => {
	showRulesModal.value = true
}

const showMonthPicker = () => {
	showPicker.value = true
}

const onMonthConfirm = (e) => {
	currentMonth.value = e.value[0]
	showPicker.value = false
	// 这里可以根据选择的月份重新加载数据
	uni.showToast({
		title: `已选择${currentMonth.value}`,
		icon: 'none'
	})
}

const prevPage = () => {
	if (currentPage.value > 1) {
		currentPage.value--
	}
}

const nextPage = () => {
	if (currentPage.value < totalPages.value) {
		currentPage.value++
	}
}

// 生命周期
onMounted(() => {
	getBarHeight()
})
</script>

<style lang="scss" scoped>
.consumption-gold-page {
	min-height: 100vh;
	position: relative;
	background: #f5f5f5;
}

.bg-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	
	.nav-left, .nav-right {
		display: flex;
		align-items: center;
	}
	
	.nav-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
	}
}

.balance-card {
	margin: 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	padding: 40rpx;
	position: relative;
	overflow: hidden;
	box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
	
	.balance-content {
		position: relative;
		z-index: 2;
		
		.balance-amount {
			font-size: 72rpx;
			color: #fff;
			font-weight: bold;
			text-align: center;
			margin-bottom: 10rpx;
		}
		
		.balance-label {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			text-align: center;
			margin-bottom: 20rpx;
		}
		
		.balance-rules {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24rpx;
			
			text {
				margin-right: 8rpx;
			}
		}
	}
	
	.balance-decoration {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		
		.coin-stack {
			width: 60rpx;
			height: 60rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			margin-bottom: 10rpx;
			background: rgba(255, 255, 255, 0.1);
			
			&:nth-child(2) {
				margin-left: 15rpx;
			}
			
			&:nth-child(3) {
				margin-left: 30rpx;
			}
		}
	}
}

.transaction-section {
	margin: 30rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1);
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
		
		.month-picker {
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			background: #f8f9fa;
			border-radius: 25rpx;
			font-size: 28rpx;
			color: #666;
			
			text {
				margin-right: 10rpx;
			}
		}
	}
	
	.transaction-list {
		.transaction-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.transaction-info {
				flex: 1;
				
				.transaction-title {
					font-size: 30rpx;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.transaction-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.transaction-amount {
				font-size: 32rpx;
				font-weight: 600;
				
				&.income {
					color: #ff6b35;
				}
				
				&.expense {
					color: #333;
				}
			}
		}
	}
	
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		
		.page-btn {
			display: flex;
			align-items: center;
			padding: 15rpx 25rpx;
			background: #f8f9fa;
			border-radius: 25rpx;
			font-size: 28rpx;
			color: #666;
			margin: 0 20rpx;
			
			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}
			
			text {
				margin: 0 8rpx;
			}
		}
		
		.page-info {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;
			
			text {
				margin: 0 5rpx;
				
				&:nth-child(2) {
					color: #999;
				}
			}
		}
	}
}

.rules-content {
	padding: 20rpx;
	
	.rule-item {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.rule-title {
			display: block;
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.rule-desc {
			display: block;
			font-size: 28rpx;
			color: #666;
			line-height: 1.5;
		}
	}
}
</style> 